<template>
    <div class="music">
        <van-tabbar v-show="isTabs" class="tabs" v-model="activelist">
            <van-tabbar-item>歌库</van-tabbar-item>
            <van-tabbar-item>荐</van-tabbar-item>
            <van-tabbar-item>My</van-tabbar-item>
        </van-tabbar>
        <scroll ref="scroll" @scroll="scroll">
            <van-row
                type="flex"
                justify="space-around"
                align="center"
                class="signin"
            >
                <van-col span="2" offset="6">
                    <img src="~assets/imgs/global/my.svg" alt="" />
                </van-col>
                <van-col span="6" v-if="!login">
                    <router-link to="/signin"> 立即登录 > </router-link>
                </van-col>
                <van-col span="6" v-else>{{ username }} </van-col>
                <van-col span="2" offset="6"></van-col>
            </van-row>
            <van-row class="list">
                <van-tabs v-model="activelist" color="#23b7cb" animated>
                    <van-tab title="歌库">
                        <div class="musiclist">
                            <div
                                class="item"
                                v-for="(item, index) in musicList"
                                :class="{ active: index === currentIndex }"
                                :key="index"
                            >
                                <van-row>
                                    <van-col span="24" class="song">
                                        <van-col span="4">
                                            <img :src="item.pic_url" alt=""
                                        /></van-col>
                                        <van-col span="11">
                                            <div class="names">
                                                <div class="name">
                                                    {{ item.name }}
                                                </div>
                                                <div class="name">
                                                    {{ item.artist }}
                                                </div>
                                            </div>
                                        </van-col>
                                        <van-col span="4" offset="1">
                                            <img
                                                @touchstart.stop="disLike(item._id)"
                                                v-if="
                                                    musiclikes.includes(
                                                        item._id
                                                    )
                                                "
                                                src="~assets/imgs/global/like.svg"
                                                alt=""
                                            />
                                            <img
                                                v-else
                                                src="~assets/imgs/global/unlike.svg"
                                                @touchstart.stop="store(item._id)"
                                            />
                                        </van-col>
                                        <van-col span="3">
                                            <img
                                                @touchstart="musicPlay(index)"
                                                v-if="
                                                    index === currentIndex &&
                                                        isPlay &&
                                                        page === 1
                                                "
                                                src="~assets/imgs/global/start.svg"
                                            />
                                            <img
                                                v-else
                                                @touchstart="musicPlay(index)"
                                                src="~assets/imgs/global/pause.svg"
                                            />
                                        </van-col>
                                    </van-col>
                                </van-row>
                            </div>
                        </div>
                        <p class="drop-down" v-if="dropDown">正在刷新数据...</p>
                    </van-tab>
                    <van-tab title="荐">
                        <div class="recommend">
                            <div
                                class="recommend_item"
                                v-for="(item, index) in list"
                                :key="index"
                            >
                                <div class="recommend_title">
                                    <span>{{ item.name }}</span>
                                    <div class="recommend_pic">
                                        <img :src="item.pic_url" alt="" />
                                    </div>
                                </div>
                                <div class="recommend_list">
                                    <div
                                        @touchstart="musicPlayList(index, 0)"
                                        class="list_item"
                                    >
                                        <span class="artist">{{
                                            item.musics[0].artist
                                        }}</span>
                                        <span class="explain">{{
                                            item.musics[0].name
                                        }}</span>
                                    </div>
                                    <div
                                        @touchstart="musicPlayList(index, 1)"
                                        class="list_item"
                                    >
                                        <span class="artist">{{
                                            item.musics[1].artist
                                        }}</span>
                                        <span class="explain">{{
                                            item.musics[1].name
                                        }}</span>
                                    </div>
                                    <div
                                        @touchstart="musicPlayList(index, 2)"
                                        class="list_item"
                                    >
                                        <span class="artist">{{
                                            item.musics[2].artist
                                        }}</span>
                                        <span class="explain">{{
                                            item.musics[2].name
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="My">
                        <div class="musiclist">
                            <template v-for="(item, index) in musicList">
                                <div
                                    class="item"
                                    v-if="musiclikes.includes(item._id)"
                                    :class="{ active: index === currentIndex }"
                                    :key="index"
                                >
                                    <van-row>
                                        <van-col span="24" class="song">
                                            <van-col span="4">
                                                <img :src="item.pic_url" alt=""
                                            /></van-col>
                                            <van-col span="11">
                                                <div class="names">
                                                    <div class="name">
                                                        {{ item.name }}
                                                    </div>
                                                    <div class="name">
                                                        {{ item.artist }}
                                                    </div>
                                                </div>
                                            </van-col>
                                            <van-col span="4" offset="1">
                                                <img
                                                    @click="disLike(item._id)"
                                                    src="~assets/imgs/global/like.svg"
                                                    alt=""
                                                />
                                            </van-col>
                                            <van-col span="3">
                                                <img
                                                    @touchstart="
                                                        musicPlay(index)
                                                    "
                                                    v-if="
                                                        index ===
                                                            currentIndex &&
                                                            isPlay &&
                                                            page === 1
                                                    "
                                                    src="~assets/imgs/global/start.svg"
                                                />
                                                <img
                                                    v-else
                                                    @touchstart="
                                                        musicPlay(index)
                                                    "
                                                    src="~assets/imgs/global/pause.svg"
                                                />
                                            </van-col>
                                        </van-col>
                                    </van-row>
                                </div>
                            </template>
                        </div>
                    </van-tab>
                </van-tabs>
            </van-row>
        </scroll>
    </div>
</template>

<script>
import Scroll from "components/common/scroll.vue";
import { mapState } from "vuex";
export default {
    name: "Music",
    data() {
        return {
            activelist: 0,
            probeType: 2,
            isTabs: false,
            dropDown: false,
            run: true,
            //推荐榜单
            list: [],
            recommend: -1,
        };
    },
    components: {
        Scroll,
    },
    methods: {
        async musicPlay(index) {
            //判断是否是当前标识页1
            if (this.page !== 1) {
                //改变识别页，并且将播放列表初始化
                this.$store.commit("changePage", { page: 1 });
                await this.$store.dispatch("musicInit", index);
            } else {
                //如果点击相同歌曲，播放或暂停
                if (this.currentIndex === index) {
                    if (this.isPlay) {
                        this.$store.commit("pause");
                    } else {
                        this.$store.commit("start", index);
                    }
                }
                //播放新歌曲
                else {
                    await this.$store.dispatch("musicInit", index);
                }
            }
        },
        //播放标识页2
        async musicPlayList(musicindex, index) {
            //标识页不为2或者榜单不同
            if (this.page !== 2 || musicindex !== this.recommend) {
                this.recommend = musicindex;
                this.$store.commit("changePage", {
                    page: 2,
                    list: this.list[musicindex].musics,
                });
                this.$store.dispatch("musicInit", index);
            } else {
                //如果点击相同歌曲，播放或暂停
                //索引相同
                if (
                    musicindex === this.recommend &&
                    this.currentIndex === index
                ) {
                    if (this.isPlay) {
                        this.$store.commit("pause");
                    } else {
                        this.$store.commit("start", index);
                    }
                }
                //索引不相同，播放新歌曲
                else {
                    await this.$store.dispatch("musicInit", index);
                }
            }
        },
        //保存喜爱的歌曲
        async store(_id) {
            if (!this.login) {
                this.$notify({ type: "warning", message: "请先登录" });
                this.$router.push("/signin");
                return
            }
            await this.$store.dispatch("store", _id);
            await this.$store.dispatch("readMsg")
        },
        //取消喜爱
        async disLike(_id) {
            console.log(_id);
            await this.$store.dispatch("disLike", _id);
            await this.$store.dispatch("readMsg")
        },
        //挂载之后加载推荐榜单
        fetchRecommend() {
            this.$axios.get("/web/musicList/list").then((res) => {
                this.list = res.data;
            });
        },
        //滚动距离判断是否需要加载数据
        scroll(position) {
            if (position.y < -50) {
                //430待定
                if (position.y < -363 * this.skip) {
                    this.dropDown = true;
                    if (this.run) {
                        this.run = false;
                        let timer = setTimeout(async () => {
                            console.log(position.y + "...................");
                            this.run = true;
                            await this.$store.dispatch("initMusic");
                            this.$refs.scroll.initScroll();
                        }, 5000);
                    }
                } else {
                    this.dropDown = false;
                }
                this.isTabs = true;
            } else {
                this.isTabs = false;
            }
        },
    },
    watch: {
        //数据变化需要初始化滚动
        musicList(val) {
            this.$refs.scroll.initScroll();
            // this.$refs.scroll.scroll.refresh();
        },
    },
    mounted() {
        this.fetchRecommend();
    },
    computed: mapState([
        "page",
        "musicList",
        "currentIndex",
        "isPlay",
        "skip",
        "musiclikes",
        "login",
        "username",
    ]),
};
</script>

<style lang="less" scoped>
.music {
    width: 100vw;
    overflow: hidden;
    margin-bottom: 1.2rem;
    flex: 1;
    z-index: 2;
    position: relative;
    .tabs {
        width: 70%;
        height: 1rem;
        margin: 0 auto;
        background-color: white;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        .van-tabbar-item {
            font-size: 14px;
        }
    }
    .signin {
        height: 1rem;
        font-size: 0.3rem;
        border-bottom: 1px transparent solid;
        border-image: linear-gradient(to right, #000718, #14b5ca) 10 10;
        line-height: 1rem;
        img {
            display: block;
            max-width: 1rem;
            margin: 0.2rem 0;
        }
    }
    .list {
        margin: 0 auto;
        width: 100%;
        padding: 0 15%;
        .drop-down {
            line-height: 1rem;
            text-align: center;
            font-size: 0.3rem;
        }
        .musiclist {
            .song {
                width: 100%;
                height: 1rem;
                line-height: 1rem;
                font-size: 0.3rem;
                margin: 0.3rem 0;
                border-bottom: 1px transparent solid;
                border-image: linear-gradient(to right, #000718, #23b7cb) 1 10;
                img {
                    height: 0.6rem;
                    margin: 0.2rem 0 0.2rem;
                }
                .names {
                    display: flex;
                    height: 1rem;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    .name {
                        flex: 1;
                        display: inline;
                        margin-left: 0.2rem;
                        line-height: 0.5rem;
                        overflow: hidden;
                        text-align: center;
                        flex-wrap: nowrap;
                    }
                }
            }
        }
        .recommend {
            width: 100%;
            height: auto;
            margin-top: 0.2rem;
            .recommend_item {
                border: 1px solid #23b7cb;
                margin-top: 0.3rem;
                padding: 0.2rem;
                width: 100%;
                height: 2rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                .recommend_title {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    span {
                        margin-top: 0.2rem;
                        margin-left: 0.1rem;
                        font-size: 0.3rem;
                    }
                    .recommend_pic {
                        width: 1rem;
                        margin-top: 0.1rem;
                        border: 1px solid black;
                    }
                }
                .recommend_list {
                    text-align: left;
                    width: 100%;
                    height: 0.3rem;
                    margin-left: 0.4rem;
                    .list_item {
                        margin-top: 0.15rem;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        border-bottom: 1px transparent solid;
                        border-image: linear-gradient(
                                to right,
                                #000718,
                                #14b5ca
                            )
                            10 10;
                        .artist {
                            width: 1.2rem;
                            height: 0.3rem;
                            overflow: hidden;
                        }
                        .explain {
                            width: 2rem;
                            height: 0.3rem;
                            text-align: left;
                            margin-left: 0.2rem;
                            color: #666666;
                            overflow: hidden;
                        }
                    }
                }
            }
        }
    }
}
</style>
